<template>
    <view class="main">
        <view class="page-head">
            <view class="thumb" :style="{ backgroundImage: `url(${dataInfo.avatar || avatarShowSrc})` }" @click="chooseImage('avatar')">
            </view>
            <view class="bd" @click="chooseImage('avatar')"> 点击可修改头像 </view>
        </view>
        <view class="form">
            <view class="input-view">
                <text class="title">基本信息</text>
            </view>
            <view class="input-view">
                <text class="title">用户名</text>
                <input
                  class="input"
                  v-model="dataInfo.name"
                  type="text"
                  confirm-type="next"
                  placeholder="请输入用户名"
                />
            </view>
            <view class="input-view">
                <text class="title"><!-- <text class="red">*</text> -->登录账号</text>
                <input
                  class="input"
                  v-model="dataInfo.account"
                  type="text"
                  disabled="true"
                  confirm-type="next"
                  placeholder="请输入账号"
                />
            </view>
        </view>
        <x-modal
          v-model="showLogoutView"
          content="确定要退出登录吗？"
          :show-cancel-button="true"
          @confirm="onLogout"
        ></x-modal>
        <Message ref="message"></Message>
        <view class="fixed-bottom">
            <button class="btn btn-primary" @click="save">保存</button>
            <button class="btn btn-info" @click="onLogout">退出登录</button>
        </view>
    </view>
</template>

<script>
import { imgBaseUrl, imgBaseUrlV0, uploadUrl } from "@/common/config";

import detailModule from "@/common/mixins/detail-module";
import { getUser, putUser, logout as ApiLogout } from "@/common/api/user.js";
import { mapState, mapActions, mapMutations } from "vuex";
import xModal from "@/components/public/x-modal/x-modal";
export default {
  mixins: [detailModule],
  components: {
    xModal,
  },
  computed: {
    ...mapState("User", ["token"]),
  },
  data() {
    return {
      baseUrl: "",
      userInfo: "",
      user: null,
      imgBaseUrlV0,
      avatarShowSrc: imgBaseUrlV0 + "temporary/mine-avatar.png",
      weChatQRCodeShowSrc: imgBaseUrlV0 + "not-found.png",
      showLogoutView: false,
      mixinViewOptions: {
        getURL: "/getUserInfo",
        isShowLoading: true,
        reachBottom: true,
        createdIsNeed: true,
        pullDown: true,
      },
    };
  },
  onLoad() {},
    methods: {
        ...mapActions("User", ["getUserInfo"]),
        ...mapMutations("User", ["logout"]),
        fetchComplete(err, data) {
            data.sex += "";
            return data;
        },
    
        uploadImg(i) {
            let _this = this
            uni.uploadFile({
                url: uploadUrl,
                filePath: i,
                name: "file",
                header: {
                  Authorization: "Bearer " + this.token,
                },
                success(response) {
                    let res = JSON.parse(response.data);
                    _this.dataInfo.avatar = res.data.path
                },
                fail: (err) => reject(err),
            }); 
        },

        // 选择图片
        chooseImage(type) {
            const that = this;
            uni.chooseImage({
                count: 1,
                success: (data) => {
                    let i = data.tempFilePaths[0];
                    this.uploadImg(i);
                },
                fail: (data) => {},
            });
        },
        // 清除选择图片
        clearImage(type) {
            switch (type) {
                case "avatar":
                    this.dataInfo.avatar = null;
                    this.dataInfo.avatarShowSrc =
                    this.imgBaseUrlV0 + "temporary/mine-avatar.png";
                    break;
                case "weChatQRCode":
                    this.dataInfo.weChatQRCode = null;
                    this.dataInfo.weChatQRCodeShowSrc =
                    this.imgBaseUrlV0 + "not-found.png";
                    break;
             }
        },

        // 保存个人信息
        async save() {
          // 验证
            let checkValidate = true;
            let message = "验证有误";
            if (checkValidate) {
                uni.showLoading({
                    title: "保存中...",
                    mask: false,
                });
                let form = this.dataInfo;

                putUser(form).then(async (res) => {
                    uni.hideLoading();
                    if (res.code !== this.$ERR_OK) {
                      return this.message.error(res.message);
                    }
                    this.getUserInfo();
                    uni.$emit("reload-mine");
                    this.showModal({
                        title: "提示",
                        content: "修改成功,点击返回上一页",
                        showCancel: false,
                        success: (r) => this.$Router.go(-1),
                    });
                }).catch((err) => {
                    uni.hideLoading();
                });
            } else {
                this.message.error(message);
            }
        },
        async onLogout() {
            return this.showModal({
                title: "提示",
                content: "确认退出登录吗?",
                success: (r) => {
                    if (r.confirm) {
                        this.logout();
                        uni.$emit("reload-mine");
                        uni.navigateBack({
                            delta: 1,
                        });
                    }
                },
            });
        },
    },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

.main {
  background: linear-gradient(180deg, #0d1523 0%, #102945 100%);
  padding: 30rpx 0 140rpx;
  min-height: calc(100vh - var(--window-top));
  box-sizing: border-box;

  .page-head {
    display: flex;
    padding: 40rpx 24rpx;
    border-bottom: 10rpx solid #3f5270;
    align-items: center;

    > .thumb {
      flex: 0 0 120rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 120rpx;
      margin-right: 46rpx;
      background-size: cover;
    }

    > .bd {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: color-white;
    }
  }

  .form {
    .file-view, .input-view, .icon-view {
      display: flex;
      flex-direction: row;
      padding: 0 15px;
      border-radius: 15px;

      > .title {
        width: 150rpx;
        line-height: 90rpx;
        font-size: 32rpx;
		color:#fff;
      }

      .icon {
        line-height: 70rpx;
        margin-right: 30rpx;

        &:last-child {
          margin-right: 0;
        }
      }

      .text {
        padding: 0 15px;
        line-height: 70rpx;
        font-size: 28rpx;
        color: #fff;
      }
    }

    .input-view {
      &:first-child {
        line-height: 50rpx;
        margin-top: 24rpx;

        >.title {
          line-height: 50rpx;
        }
      }

      .input {
        flex: 1;
        height: 90rpx;
        line-height: 88rpx;
        padding: 0 5px;
        font-size: 32rpx;
        border-bottom: 1rpx solid #d8d8d8;
        color: #fff;
      }

      .tag {
        margin: 10rpx 0;
        line-height: 50rpx;
        padding: 0 20rpx;
      }
    }

    .icon-view {
      .add-icon {
        flex: 1;
        color: #007aff !important;
        font-weight: 700;
        line-height: 70rpx;
        text-align: left;
      }
    }

    .file-view {
      .choose-image {
        flex: 1;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 28rpx;
        padding: 0 5px;
        color: #fff;
      }
    }

    .button-view {
      padding: 30rpx 0;
      display: flex;
      text-align: center;

      .login-btn {
        width: 40%;
      }

      .register {
        margin-top: 40rpx;
        font-size: 32rpx;
        color: #fff;
      }

      .save {
        width: 100%;
        margin: 0 20rpx;
        background-color: #5096ff;
        color: #fff;
        padding: 20rpx 0;
        border-radius: 10rpx;
        letter-spacing: 3rpx;
      }

      .login {
        width: 40%;
        margin: auto;
        background-color: #dbdbdb;
        color: #fff;
        padding: 20rpx 0;
        border-radius: 10rpx;
        letter-spacing: 3rpx;
      }
    }

    .image-view {
      text-align: center;
      padding-bottom: 20rpx;

      .image {
        width: 30%;
      }
    }
  }
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10rpx 24rpx;

  > .btn {
    margin-bottom: 20rpx;
  }
}
</style>
